<template>
    <div class="design-item">
    	<!--主页面显示区-->
        <div class="design-item-controller">
            <div class="design-item-controller-handle">
                <div :class="['design-component-text-preview',{'text-has-link': linkType}]" :style="currentStyle">
                    <div class="text-content">
                        {{text}}
                    </div>
                </div>
            </div>
            <slot name="menu"></slot>
        </div>
        
        <!--编辑区--> 
        <div class="design-item-editor" v-show="show&&!showAddMenuGroup">
            <div>
                <div class="design-item-editor-title">文本</div>
                <div class="editor-group">
                    <div class="editor-group-label editor-group-label-top">
                    	<em class="group-required-star">*</em>文本：
                    </div>
                    <div class="editor-group-control">
                        <textarea v-model.trim="text" maxlength="100" @input="bindTextareaInput" placeholder="请输入要说明的文字, 最多100字" style="margin: 0px; width: 273px; height: 124px;"></textarea>
                        <div v-if="enableValid && hasError" class="design-editor-control-group-error" style="margin-left: 15px;margin-top: 5px">文本不能为空</div>
                    </div>
                </div>
                <div class="editor-group">
                    <div class="editor-group-label ">字体大小：</div>
                    <div class="editor-group-control">
                        <el-radio-group v-model="fontSize">
                            <el-radio :label="18">大</el-radio>
                            <el-radio :label="14">中</el-radio>
                            <el-radio :label="12">小</el-radio>
                        </el-radio-group>
                        
                    </div>
                </div>

                <div class="editor-group">
                    <div class="editor-group-label">背景颜色：</div>
                    <div class="editor-group-control">
                        <el-color-picker v-model="bgColor"></el-color-picker>
                    </div>
                </div>
                <div class="editor-group">
                    <div class="editor-group-label">字体颜色：</div>
                    <div class="editor-group-control">
                        <el-color-picker v-model="color"></el-color-picker>
                    </div>
                </div>
                <div class="editor-group">
                    <div class="editor-group-label">显示位置：</div>
                    <div class="editor-group-control">
                        <el-radio-group v-model="showMethod">
                            <el-radio :label="0">居左</el-radio>
                            <el-radio :label="1">居中</el-radio>
                            <el-radio :label="2">居右</el-radio>
                        </el-radio-group>
                    </div>
                </div>
                

            </div>
        </div>
        <slot name="addMenuGroup" v-if="showAddMenuGroup"></slot>
    </div>
</template>
<script>
	//	设置默认参数
	var defaultDataFormat = {
	    // 文本内容
	    text: '',
	    // 背景颜色
	    bgColor: '#FFFFFF',
	    // 文字颜色
	    color: '#000000',
	    // 文字尺寸 大号18 ，中号14，小号12
	    fontSize: 14,
	    // 显示方式 0：文字靠左 1: 文字居中 2：文字靠右
	    showMethod: 0,
	    //  链接类型标识
	    linkType: '',
	    // 链接类型显示名称
	    linkTypeName: '',
	    // 链接值
	    linkValue: '',
	    //链接值显示名称
	    linkValueName: ''
	}
    export default {
        name: "nc-design-item-text",
        otherInfo: {
            title: '文本',
            type: 'text',
            group : 0 ,
            max : 0
        },

        //外部传入参数
        props: {
            show: {
                type: Boolean,
                default: false
            },
            options: {
                type: Object,
                default: null
            },
            cid: {
                type: Number
            },
            showAddMenuGroup: {
                type: Boolean,
                default: false
            }
        }, 
        data() {
            let data = this.options.text ? {
                text: this.options.text,
                bgColor: this.options.bgColor,
                color: this.options.color,
                fontSize: this.options.fontSize,
                showMethod: this.options.showMethod,
                linkType: this.options.linkType,
                linkTypeName: this.options.linkTypeName,
                linkValue: this.options.linkValue,
                linkValueName: this.options.linkValueName,
            } : ($.extend(true, {}, defaultDataFormat))

            let customData = {
                enableValid :false ,
                hasError : false
            }
            return $.extend({}, data, customData)
        },
        computed: {
	        currentStyle (){
	            return {
	                textAlign: this.showMethod != 0 ? ( this.showMethod == 1 ? 'center' : 'right') : 'left',
	                color: this.color,
	                backgroundColor: this.bgColor,
	                fontSize: this.fontSize + 'px'
	            }
	        } 
        },
        created() {
           // 由于没有传值 所以继承了 默认属性
        },
        mounted() {
        },
        methods: {
            // 绑定文本域的值
            bindTextareaInput(){
                if (this.enableValid == true ) {
                    this.hasError =!this.text
                }
            },
            getCurrentData () {
                this.enableValid = true
                return !( this.hasError = !this.text) ? {
                    text: this.text,
                    bgColor: this.bgColor,
                    color: this.color,
                    fontSize: this.fontSize,
                    showMethod: this.showMethod,
                    linkType: this.linkType,
                    linkTypeName: this.linkTypeName,
                    linkValue: this.linkValue,
                    linkValueName: this.linkValueName,
                    type: 'text'
                } : null
            } ,            
        }
    };
</script>